<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>404 - 页面未找到</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义颜色和字体 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#64748B',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .animate-float {
        animation: float 6s ease-in-out infinite;
      }
      .animate-pulse-slow {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
    }
    
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
      100% { transform: translateY(0px); }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col items-center justify-center p-4 text-gray-800">
  <!-- 页面容器 -->
  <div class="max-w-md w-full text-center">
    <!-- 404图标/文字 -->
    <div class="relative mb-8">
      <div class="text-[10rem] font-bold text-primary/20 absolute -inset-4 animate-float">404</div>
      <div class="text-[8rem] font-bold text-primary relative z-10 text-shadow">404</div>
    </div>
    
    <!-- 错误信息 -->
    <h1 class="text-[clamp(1.5rem,5vw,2.5rem)] font-bold mb-4 text-gray-800">页面未找到</h1>
    <p class="text-secondary text-lg mb-8">抱歉，您访问的页面不存在或已被移除</p>
    
    <!-- 返回首页按钮 -->
    <a href="/" class="inline-flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-primary/50">
      <i class="fa fa-home"></i>
      返回首页
    </a>
    
    <!-- 额外提示 -->
    <p class="mt-8 text-gray-500 text-sm">
      或者您可以尝试 <a href="#" class="text-primary hover:underline">搜索</a> 或检查网址是否正确
    </p>
  </div>
  
  <!-- 页脚 -->
  <footer class="mt-16 text-gray-400 text-sm">
    <p>&copy; 2023 您的网站名称 - 版权所有</p>
  </footer>
  
  <!-- 简单的页面加载动画效果 -->
  <script>
    // 页面加载时的淡入效果
    document.addEventListener('DOMContentLoaded', () => {
      document.body.classList.add('opacity-100');
      document.body.classList.remove('opacity-0');
    });
  </script>
</body>
</html>